<template>
	<view class="container">
		<sa-tabs :tabList="tabList" @onClickTab="tabChange"></sa-tabs>

		<view class="order-panel">
			<view class="order-item" v-for="item in orders" :key="item.id" @click="gotoOrderDetail(item.id)">
				<view class="order-name">{{item.userName}}</view>
				<view class="order-info">
					<image :src="item.avatar || '/static/logo.png'" mode="aspectFill"></image>
					<view class="order-detail">
						<view class="order-code">订单号:{{item.id}}</view>
						<view class="order-time">下单时间:{{formatDateTime(item.createTime)}}</view>
						<view class="order-num">数量：{{item.orderNum}}</view>
					</view>
				</view>
				<view class="order-price">
					订单金额: {{priceTransform(item.orderMoney)}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getShopOrder,
	} from '@/api/shops/prePayOrders/prePayOrders.js'
	import {
		transform
	} from '@/minix/mixin.js'
	export default {
		mixins: [transform],
		data() {
			return {
				tabList: [{
					text: "新订单"
				}, {
					text: "已完成"
				}, {
					text: "直接付款"
				}, {
					text: "退款"
				}],
				shopId: '',
				orders: [],
				orderStatus: 1,
			}
		},
		onLoad: function(option) {
			this.shopId = option.shopId
			this.init()
		},
		methods: {
			async init() {
				getShopOrder(this.orderStatus).then((res) => {
					
						this.orders = res
					
				})
			},
			tabChange(e) {
				switch (e.index) {
					// 新订单
					case 0:
						this.orderStatus = 1;
						break
						// 已完成
					case 1:
						this.orderStatus = 2;
						break
						// 直接付款
					case 2:
						this.orderStatus = 40;
						break
						// 退款
					case 3:
						this.orderStatus = 4;
						break
				}
				getShopOrder(this.orderStatus).then((res) => {
					
						this.orders = res
					
				})
			},
			gotoOrderDetail(orderId){
				let _this = this;
				uni.navigateTo({
					url:'/subpkg/shops/preOrderDetail/preOrderDetail?id=' + orderId,
					events:{
						needRefreshPage: function(data) {
							if(data) {
								_this.init()
							}
						}
					}
					
				})
			}
		}
	}
</script>

<style lang="scss">
	.order-panel {
		background-color: #fff;
		display: flex;
		flex-direction: column;

		.order-item {
			padding: 10px;
			padding-left: 20px;
			border-bottom: 1px solid #000;
			display: flex;
			flex-direction: column;
			margin-bottom: 10px;

			.order-name {
				font-size: 14px;
				font-weight: bold;
				margin-bottom: 5px;
			}

			.order-info {
				display: flex;
				flex-direction: row;

				image {
					width: 60px;
					height: 60px;
				}

				.order-detail {
					display: flex;
					flex-direction: column;
					font-size: 12px;
					font-weight: 400;
					margin-left: 10px;
					justify-content: space-between;

					.order-code {}
				}

			}

			.order-price {
				display: flex;
				align-items: flex-end;
				justify-content: flex-end;
				font-size: 14px;
				font-weight: 600;
			}
		}
	}
</style>